<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="/plugs/zTree-zTree_v3-master/zTreeStyle.css" rel="stylesheet">
        <!--    <link href="/plugs/zTree-zTree_v3-master/bootstrap.menu.css" rel="stylesheet">-->
        <!--
            <link href="/plugs/zTree-zTree_v3-master/bootstrap.menu.css" rel="stylesheet">
        -->
        <style type="text/css">
            .ztree-menu .ztree * {
                font-size: 18px;
                font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
                font-family: 阿里巴巴普惠体, Pingfang SC, "Microsoft YaHei", Sans, serif
            }

            .ztree-menu .ztree li {
                line-height: normal !important;
            }

            .ztree-menu .ztree li a,
            .ztree-menu .ztree li > span {
                height: unset !important;
            }

            .ztree-menu .ztree li a {
                color: #666666;
                padding: 6px 15px;
                border-radius: 5px;
            }

            .ztree-menu .ztree li > span {
                color: #007bff;
                font-weight: 900;
            }

            .ztree-menu .ztree li {
                line-height: normal !important;
            }

            .ztree-menu .ztree li a.curSelectedNode {
                padding-top: 6px;
                background: rgb(235, 244, 255);
                color: rgb(0, 100, 255);
                border: 0px !important;
            }

            .ztree-menu .ztree li span.button {
                line-height: normal !important;
                width: 30px !important;
                font-family: "iconfont" !important;
                font-size: 20px;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                background-image: none !important;
                padding: 2px 4px;
                color: #007bff;
                font-weight: 900;
                padding-top: 10px;
            }

            .ztree-menu .ztree li .noline_close:before {
                content: "\e607";
            }

            .ztree-menu .ztree li .noline_open:before {
                content: "\e64f";
            }

        </style>
        <style type="text/css">
            .container-fluid {
                height: 100%; /*//父元素的高度也需要是100%才可以出现滚动条*/
                position: fixed;
                z-index: 2;
            }
            .container-fluid .card{
                overflow-y: auto;
                overflow-x: hidden;
                height: 90%;
            }

            .breadcrumb{
                min-height: 50px;
            }
            .dropdown .text-muted{
                width: 100%;
            }
        </style>

        <script type="text/javascript" src="/plugs/zTree-zTree_v3-master/jquery.ztree.core.min.js"></script>
        <script type="text/javascript" src="/plugs/zTree-zTree_v3-master/jquery.ztree.exedit.min.js"></script>
        <script type="text/javascript" src="/plugs/zTree-zTree_v3-master/jquery.ztree.excheck.js"></script>
        <script type="text/javascript" src="/plugs/zTree-zTree_v3-master/jquery.ztree.exhide.js"></script>
        <script type="text/javascript" src="/pages/menu/menu.js"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="ibox-menu-tree card" style="float:left;width:40%;">
                <div class="ibox-title">
                    <h5>菜单配置(可拖拽移动菜单)</h5>
                </div>
                <div class="ibox-content ztree-menu">
                    <ul id="treeMenu" class="ztree"></ul>
                </div>
            </div>

            <div class="ibox-menu card" style="float:left;width:60%;">
                <div class="">
                    <nav>
                        <ol id="menu-breadcrumb" class="breadcrumb"></ol>
                    </nav>
                    <div class="" style="float:right;right: 20px;position: absolute;">
                        <button type="button" id="save" class="btn btn-primary">保存</button>
                    </div>
                </div>
                <div class="form">
                    <form id="menuForm" role="form">
                        <input type="hidden" class="form-control" id="id" name="id"/>
                        <input type="hidden" class="form-control" id="parentId" name="parentId"/>
                        <input type="hidden" class="form-control" id="treeId" name="treeId"/>
                        <div class="form-group row">
                            <label class="col-sm-2 text-right">父节点</label>
                            <div class="col-sm-6 ztree-menu">
                                <div class="dropdown">
                                    <input type="text" readonly style="background: #fff" class="form-control dropdown-toggle" id="parentName" name="parentName"/>
                                    <div class="dropdown-menu  p-4 text-muted">
                                        <ul id="parentNameTree" class="ztree parent-zTree"></ul>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">名称</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="name" name="name"/>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 text-right">路由</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="route" name="route"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">类型</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="type" name="type">
                                    <option value="">请选择</option>
                                    <option value="1">目录</option>
                                    <option value="2">菜单</option>
                                    <option value="3">按钮</option>
                                    <option value="4">接口</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">状态</label>
                            <div class="col-sm-6">
                                <select class="form-control" id="status" name="status">
                                    <option value="">请选择</option>
                                    <option value="0">隐藏</option>
                                    <option value="1">显示</option>
                                    <option value="2">禁用</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">排序</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="sort" name="sort"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">样式</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="css" name="css"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">图标</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control" id="icon" name="icon"/>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 text-right">删除</label>
                            <div class="col-sm-6">
                                <select  class="form-control" id="isDeleted" name="isDeleted">
                                    <option value="0">否</option>
                                    <option value="1">是</option>
                                </select>
                            </div>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </body>
</html>